<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>博客</title>
    <!--bootstrap css文件-->
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <!--jquery js文件-->
    <script src="js/jquery.min.js"></script>
    <!--bootstrap js文件-->
    <script src="bootstrap-4.2.1-dist/js/bootstrap.bundle.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
    <!--自定义css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <!--灯箱插件-->
    <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">
    <script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
    <script src="swipebox-master/src/js/jquery.swipebox.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="45"></a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="class.html">分类</a></li>
                <li class="nav-item"><a class="nav-link" href="blog.html">博客</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li>
            </ul>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索">
                <button type="submit" class="btn btn-outline-success my-2 my-sm-0">搜索</button>
            </form>

        </div>

    </nav>

    <div class="row border bg-white mt-4 m-0 px-3 pt-4 pb-5 blog-border">
        <div class="col-8">
            <div>
                <h4><i class="fa fa-smile-o mr-2"></i><span>我的足迹</span></h4><hr/>
                <div class="mb-3">
                    <i class="fa fa-user-o"></i><span class="ml-1 mr-2">欢欢</span>
                    <i class="fa fa-clock-o"></i><span class="ml-1 mr-2">15天前</span>
                    <a href="javascript:void(0)"><i class="fa fa-comment-o"></i>156条</a>
                </div>
                <img class="img-fluid mb-3" src="images/005.jpg" alt="">
                <div>
                    <p class="retract">
                        一个人旅行，一台相机足以，不理会繁杂的琐事，自由自在地，去体验一个城市，一段故事，留下一片欢笑。
                    </p>
                </div>
            </div>

             <div class="my-5">
                <h4><i class="fa fa-smile-o mr-2"></i><span>我的足迹</span></h4><hr/>
                <div class="mb-3">
                    <i class="fa fa-user-o"></i><span class="ml-1 mr-2">欢欢</span>
                    <i class="fa fa-clock-o"></i><span class="ml-1 mr-2">10天前</span>
                    <a href="javascript:void(0)"><i class="fa fa-comment-o"></i>10条</a>
                </div>
                <img class="img-fluid mb-3" src="images/002.jpg" alt="">
                <div>
                    <p class="retract">
                         早晨我起的很晚，太阳以当空高照。
                        我挣扎的起了身，很快的洗漱，出门上班。
                        无奈因为时间走的太快，所以一直在追赶。
                        希望驻足脚步，等等我的愿望，是不是过于奢侈。
                        在烈日的照耀下，即使有秋风，我也感觉闷热难耐。
                        在追赶的旅程中，希望插上翅膀，展翅翱翔。
                    </p>
                </div>
            </div>
            <a href="javascript:void(0);" class="btn btn-info btn-block">更多</a>
        </div>

        <div class="col-4">
            <h4 class="shadow mb-4"><span class="mx-2">推荐旅游胜地</span><i class="fa fa-bicycle"></i></h4>
            <ul class="list-group list-group-flush">
                <li class="list-group-item border-top-0"><i class="fa fa-hand-o-right mr-3"></i>神秘奇幻、佳景荟萃的九寨沟</li>
                <li class="list-group-item"><i class="fa fa-hand-o-right mr-3"></i>奇伟俏丽、灵秀多姿的黄山</li>
                <li class="list-group-item"><i class="fa fa-hand-o-right mr-3"></i>青山碧水、银滩巨磊的三亚</li>
                <li class="list-group-item"><i class="fa fa-hand-o-right mr-3"></i>山青、水秀、洞奇、石美的桂林山水</li>
                <li class="list-group-item border-bottom"><i class="fa fa-hand-o-right mr-3"></i>山水秀丽、景色宜人的杭州西湖</li>
            </ul>
        </div>
    </div>

</div>

</body>
<script>

</script>
</html>